<template>
  <div>
    <h1>Children {{ value }}</h1>
    <button @click="change">点我修改 msg</button>
    <button @click="update">子组件 更新 父组件 aaa 的值</button>
    <!-- 特殊情况:  -->
    <!--
      如果 props 接收到的数据, 是一个对象
      那么更改对象里面的属性, 不叫子组件改父组件
      只有地址更改了, 才叫子改父
      原理:
      对象的地址在栈里面, 值的引用在堆里面
      在子组件修改父组件传递的对象中的属性值, 修改的是属性值在堆里的值, 并没有修改对象的地址
     -->
    <button />
  </div>
</template>

<script>
export default {
  props: {
    // v-model
    value: {
      type: String,
      default: ''
    },
    // .sync 修饰符
    aaa: {
      type: Number,
      default: 0
    },
    bbb: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {

    }
  },
  methods: {
    // v-model
    change() {
      this.$emit('input', this.value + '-')
    },
    // .sync 修饰符
    update() {
      this.$emit('update:aaa', this.aaa + 1)
      this.$emit('update:bbb', this.bbb + 4)
    }
  }
}
</script>

<style>

</style>
